<template>
  <div>
    <page-list :x-uri="uri" :custom-components="custom" :x-tabs="tabs" :doactions="doactions" :checkbox-item="false">
      <!-- 页面操作按钮 -->
      <template v-slot:page-button>
        <el-button size="mini" type="primary" :disabled="!isFinished" @click="create">添加课程</el-button>
        <el-button v-if="isFinished" size="mini" type="primary" @click="finish">完结课程</el-button>
      </template>
    </page-list>
    <choose-course :value.sync="course_id" :visible.sync="visible" @submit="submit" />
  </div>
</template>
<script>
import PageList from '@public/template/page_list.vue';
import Titile from '../../video/components/title.vue';
import ChooseCourse from './choose/index.vue';
import { mapGetters } from 'vuex'

export default {
  components: {
    PageList,
    ChooseCourse
  },
  inject: ['reload'],
  data() {
    return {
      uri: 'course/admin/classes/' + this.$route.params.id + '/link/list',
      tabs: [
        {
          title: '班级列表',
          uri: '/course/classes/list'
        },
        {
          title: '关联课程',
          uri: '/course/classes/' + this.$route.params.id + '/link/list'
        }
      ],
      course_id: 0,
      visible: false,
      custom: {
        title: Titile
      },
      doactions: [
          { title: '移除',
            callback: this.delete,
            display: _ => {
              return this.isFinished;
            }
          }
      ]
    };
  },
  computed: {
    ...mapGetters('pageList', ['response']),
    isFinished() {
      return !this.response.is_finished;
    }
  },
  methods: {
    create: function() {
      this.visible = true;
    },
    delete: function({ row }) {
      this.$box
        .confirm('确认移除吗')
        .then(() => {
          this.$http.delete(
            '/course/admin/classes/' + this.$route.params.id + '/link/' + row.id,
            {},
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    },
    submit: function() {
      this.$http.post(
        '/course/admin/classes/' + this.$route.params.id + '/link/create',
        {
          course_id: this.course_id
        },
        response => {
          this.$message.success(response.msg, _ => {
            this.reload();
          });
        },
        error => {
          this.$message.error(error.msg);
        }
      );
    },
    finish: function() {
      this.$box
          .confirm('完结课时后将不能添加或删除课程，确认完结吗')
          .then(() => {
            this.$http.post(
                '/course/admin/classes/' + this.$route.params.id + '/finished',
                {},
                response => {
                  this.$message.success(response.msg, _ => {
                    this.reload();
                  });
                },
                error => {
                  this.$message.error(error.msg);
                }
            );
          })
          .catch(() => {});
    }
  }
};
</script>
